

  {% include 'common/header.html' %}

 <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #001B3D;
            color: white;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .main-content {
            padding: 50px;
        }

        .hero {
            margin-bottom: 50px;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 30px;
        }

        .search-box {
            width: 100%;
            max-width: 600px;
            padding: 15px;
            border-radius: 25px;
            border: none;
            margin-bottom: 20px;
        }

        .search-tags {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .features {
            display: flex;
            gap: 30px;
            margin-bottom: 50px;
        }

        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 50px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #4A90E2;
        }

        .about-section {
            display: flex;
            gap: 50px;
            align-items: center;
        }

        .about-text {
            flex: 1;
        }

        .about-image {
            flex: 1;
        }
    </style>



    <header class="header">
        <div class="logo">LOGO</div>
        <nav class="nav-links">
            <a href="#">About</a>
            <a href="#">Docs</a>
            <a href="#">Submit</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <main class="main-content">
        <section class="hero">
            <h1>Explore Chemistry</h1>
            <input type="search" class="search-box" placeholder="Search...">
            <div class="search-tags">
                <span>Try</span>
                <span>aspirin</span>
                <span>EGFR</span>
                <span>C9H8O4</span>
                <!-- 更多标签 -->
            </div>
        </section>

        <section class="features">
            <div class="feature-item">
                <img src="structure-icon.png" alt="Draw Structure">
                <span>Draw Structure</span>
            </div>
            <div class="feature-item">
                <img src="upload-icon.png" alt="Upload ID List">
                <span>Upload ID List</span>
            </div>
            <div class="feature-item">
                <img src="browse-icon.png" alt="Browse Data">
                <span>Browse Data</span>
            </div>
            <div class="feature-item">
                <img src="periodic-icon.png" alt="Periodic Table">
                <span>Periodic Table</span>
            </div>
        </section>

        <section class="stats">
            <!-- 统计数据部分 -->
        </section>

        <section class="about-section">
            <div class="about-text">
                <h2>What is PubChem?</h2>
                <p>PubChem is the world's largest collection of freely accessible chemical information...</p>
            </div>
            <div class="about-image">
                <!-- 分子结构图片 -->
            </div>
        </section>
    </main>

  {% include 'common/footer.html' %}

